let tohtml = document.getElementById('tohtml');
let tocss = document.getElementById('tocss');
let tojs = document.getElementById('tojs');

let divhtml = document.getElementById('divhtml');
let divcss = document.getElementById('divcss');
let divjs = document.getElementById('divjs');

// 记录当前显示的元素
let current = divhtml;

tohtml.addEventListener('click', () => {
  // 将原来的显示元素隐藏，元素的style属性可以直接修改元素任意样式
  current.style.display = 'none';
  // 显示对应的元素
  divhtml.style.display = 'block';
  // 记录当前显示的元素
  current = divhtml;
});

tocss.addEventListener('click', () => {
  // 将原来的显示元素隐藏，元素的style属性可以直接修改元素任意样式
  current.style.display = 'none';
  // 显示对应的元素
  divcss.style.display = 'block';
  // 记录当前显示的元素
  current = divcss;
});

tojs.addEventListener('click', () => {
  // 将原来的显示元素隐藏，元素的style属性可以直接修改元素任意样式
  current.style.display = 'none';
  // 显示对应的元素
  divjs.style.display = 'block';
  // 记录当前显示的元素
  current = divjs;
});

// js第一阶段小结,js是真正的编程语言，但是是嵌入到html的语言
// js可以操作html和css的任意内容，且能够响应ui的操作和事件
// js最为重要的三个功能
// 1:可以任意修改html中的内容，
//   可以创建任意的html元素并放到页面中，也可以删除页面内容
// 2:可以修改元素的任意属性，可以通过classList控制元素class属性
//   可以添加和移除元素的任意属性，包括自定义的属性
//   可以通过style属性控制元素的任意样式
// 3:可以响应元素任意事件，比如鼠标点击，元素的值变化等等
//   方法是addEventListener('事件名',回调函数)